<section ng-controller="foodController as fc">
	<header>
		<div class="container">
			<div class="row top-header">
				<div class="col-sm-3 text-left">
					<a href="#" class="logo">
						<img src="http://10.222.29.165:3456/images/logo.png" alt="logo">
					</a>
				</div>				
			
			</div>
		</div>
		<div class="container">
			<div class="bg-mn color-inher">
				<div class="row m-0">
				
					<!-- 下拉导航条 -->
					<div class="col-sm-1 col-md-1 col-lg-2 p-0">
						<div class="dropdown category-bar">
							<a href="#" class="dropdown-toggle"  role="button" aria-haspopup="true" aria-expanded="true">
								<i class="fa fa-bars"></i><span>Categories</span>
							</a>
						</div>
					</div>
					
					
					<div class="col-sm-8 col-md-8 col-lg-7 p-0">
						<div class="main-menu">
							<nav class="navbar navbar-default menu">
								<div class="navbar-header">
									<button type="button" class="navbar-toggle collapsed m-r-xs-15" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
										<span class="sr-only">Toggle navigation</span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
									</button>
								</div>
								<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
									<ul class="nav navbar-nav"> 
											<li><a ui-sref="home">Home</a></li>
											<li><a ui-sref="login">Login</a></li>
											<li><a href="" ng-click="hc.loginOut()">Out</a></li>
											<li><a ui-sref="register">Register</a></li>
											<li><a ui-sref="/shoppingCart/calculate">Cart</a></li>
											<li><a ui-sref="order">MyHome</a></li>
									</ul>
								</div>
							</nav>
						</div>
					</div>	
					<div class="col-sm-3 col-md-3 col-lg-3 p-0">
						<div class="search-box m-l-xs-15 m-r-xs-15" style="height:50px;">
							<input type="text" class="form-item" placeholder="Search..." ng-change="fc.searchFoodsByKewWordInMerchantStore()" ng-model="searchInput">
								
							<button type="submit" class="fa fa-search"></button>
						</div>
						
					</div>
					
				</div>
			</div>
		</div>
	</header>
	
	
	<!-- Banner -->
	
	
	
	<!-- Product tabs -->
	<div>
		<div class="container text-center m-t-30">
			<!-- 凸显商家信息 -->
			<input type="hidden" id="current_merchant_name" value="这里需要补充"> </input>
			<h3 class="title f-30"> Product</h3>
			<p>Welcome to 没有写 store. Authentic Italian food </p>
			<div class="ht-tabs ht-tabs-product text-center">
				<!-- Nav tabs -->
				<ul class="nav nav-tabs m-b-20" role="tablist">
				<!-- AllFoodTypes 食品信息 -->
					
					
				<li role="presentation" class="active">
						<a ng-click="fc.getAllFoods()" aria-controls="tab-description" role="tab" data-toggle="tab">
							<p><img src="http://10.222.29.165:3456/images/foodtype/all.jpg" alt="image"></p> 所有</a>
					</li>
				<!-- <c:forEach items="${AllFoodTypes }" var="foodType"> -->
					<li role="presentation" class="active">
						<a ng-click="fc.getFoodsByType(1)" aria-controls="tab-description" role="tab" data-toggle="tab">
							<p><img src="http://10.222.29.156:3456/images/foodtype/jiushui.jpg"+ alt="image"></p> 酒水</a>
					</li>

					<li role="presentation" class="active">
						<a ng-click="fc.getFoodsByType(2)" aria-controls="tab-description" role="tab" data-toggle="tab">
							<p><img src="http://10.222.29.156:3456/images/foodtype/taocan.jpg"+ alt="image"></p> 套餐</a>
					</li>

					<li role="presentation" class="active">
						<a ng-click="fc.getFoodsByType(3)" aria-controls="tab-description" role="tab" data-toggle="tab">
							<p><img src="http://10.222.29.156:3456/images/foodtype/zhushi.jpg"+ alt="image"></p> 主食</a>
					</li>

					<li role="presentation" class="active">
						<a ng-click="fc.getFoodsByType(4)" aria-controls="tab-description" role="tab" data-toggle="tab">
							<p><img src="http://10.222.29.156:3456/images/foodtype/xiaochi.jpg"+ alt="image"></p> 小吃</a>
					</li>



					<!-- </c:forEach> -->
				</ul>
				<!-- <h1>Hello world</h1>
				<h1>{{test}}</h1> -->
				<!-- Tab panes -->
				<div class="tab-content" ng-controller="shoppingCartController as sc">
					<!-- tips -->
						<div>
								<span style="color:red">{{sc.message}}</span>
							</div>
					<div role="tabpanel" class="tab-pane active" id="tab-description">
						
						<!-- 在这里添加菜品信息  -->
						<!-- 重点是购物车信息的改变 -->
						<div class="row" id="merchants_food_Info">
	
							<div ng-repeat="food in foods">
								<div id="food_detail_info" class="col-sm-6 col-md-4 col-lg-3">
									<!-- Product item -->
									<div class="product-item">
										<!-- 替换超链接 -->
										<a href="#">
											<!-- 控制每一张图片的大小 -->
											<img id="food_img" width="150" height="200" src={{food.image}} alt="菜品图片信息无法显示哦" /> <!-- 放图片 -->
										</a>
										<div class="product-caption">
											<h4 class="product-name">
												<label>{{food.name}}</label>
											</h4>
											<h4 class="product-price">
												<label>{{food.price}}元/每份</label>
											</h4>
											<!-- 隐藏食品的id -->
											<!-- <input id=${merchantFood.id} type="hidden" value=${merchantFood.id} /> -->
											<!-- <input type="hidden" value={{food.merchant}}></input> -->
											<!-- 需要 添加 监听器 ，实时 改变 购物车的 信息 -->
											<!--  <span class="main_changer">	 -->
											<button class="btn btn-default btn-xs minus" ng-click="sc.minusOneItem(food)">-</button>
												<input id="food_count" style="width:30px;text-align:center;font-size:5px;line-height: 1.3em;" type="text" ng-model="food.num">  
												<button class="btn btn-default btn-xs plus" ng-click="sc.plusOneItem(food)">+</button> 
											<!--  </span> -->
													<!-- 购买按钮 -->
												<p>
													<input id="add_food_to_cart" type="button" ng-click="sc.addOrderItemToShoppingCart(food)" value="加入购物车" ></input>
												</p>
										</div>
									</div>
								</div>
	
							</div>
							
							
	
	
						</div>
						<!-- 添加菜品信息 至此结束 -->
						
						<!-- 下面实现购物车信息变化 -->
						
					</div>
					<div role="tabpanel" class="tab-pane" id="tab-review">
					............
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
	<!-- Product slider-->
	<!-- 开始特色菜 -->


</section>